<template>
    <div class="container">
        <editor
            v-model="editorContent"
            :init="editorConfig"
            api-key="5ddjymbagepb4qcm1y9x9kldpknnkhazr8rspb1663abw96e"
        />
    </div>
</template>

<script>
import Editor from '@tinymce/tinymce-vue';
export default {
    components: {
        editor: Editor
    },
    props: {
        content: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            editorContent: ``,
            editorConfig: {
                menubar: false,
                statusbar: false,
                branding: false,
                visual: false,
                elementpath: false,
                mobile: {
                    plugins: [
                        // 'autosave', 'lists', 'autolink', 'paste'
                    ],
                    toolbar: false
                },
                plugins: [
                    // 'advlist autolink lists link image charmap print preview anchor',
                    // 'searchreplace visualblocks code fullscreen noneditable',
                    // 'insertdatetime media table paste code help wordcount',
                    // 'paste',
                ],
                toolbar: false,
                noneditable_noneditable_class: 'mceNonEditable',
                content_style: `
                      body {
                          font-family: Helvetica, Arial, sans-serif;
                          font-size: 14px;
                          padding: 10px;
                          box-sizing: border-box;
                          max-width: 100vw;
                          word-wrap: break-word;
                      }
                      img {
                          max-width: 100%;
                          height: auto !important;
                          object-fit: contain;
                          display: block;
                          margin: 10px auto;
                      }
                      p {
                          margin: 0;
                          padding: 0;
                      }
                      .mceNonEditable {
                          background-color: #4CAF50;
                          color: white;
                          padding: 10px 20px;
                          text-align: center;
                          text-decoration: none;
                          display: inline-block;
                          font-size: 16px;
                          margin: 4px 2px;
                          cursor: pointer;
                          user-select: none;
                          border: none;
                      }
                  `,
                valid_elements: '*[*]',
                extended_valid_elements: 'script[*]',
                init_instance_callback: editor => {
                    editor.on('BeforeSetContent', function (e) {
                        e.content = e.content.replace(/onclick="copyContext\('#/g, 'onclick="copyContext(\'');
                        e.content = e.content.replace(/'#/g, "'");
                    });
                },
                setup: editor => {
                    editor.on('init', () => {
                        const copyScript = `
                              function copyContext(selector) {
                              console.log(1111, selector);
                                  var element = document.querySelector(selector);
                                  if (element) {
                                      var content = element.outerHTML;
                                      copySafari(content);
                                  } else {
                                      console.error('Element not found:', selector);
                                      alert('未找到指定的元素');
                                  }
                              }

                              function copySafari(text) {
                                  let input = document.getElementById('copy-input');
                                  if (!input) {
                                      input = document.createElement('input');
                                      input.id = 'copy-input';
                                      input.style.position = 'absolute';
                                      input.style.left = '-1000px';
                                      input.style.zIndex = '-1000';
                                      document.body.appendChild(input);
                                  }
                                  input.value = 'NOTHING';
                                  input.setSelectionRange(0, 1);
                                  input.focus();

                                  document.addEventListener('copy', function copyCall(e) {
                                      e.preventDefault();
                                      e.clipboardData.setData('text/html', text);
                                      e.clipboardData.setData('text/plain', text);
                                      document.removeEventListener('copy', copyCall);
                                  });
                                  try {
                                      var successful = document.execCommand("copy");
                                      if (successful) {
                                          alert("内容已复制到剪贴板");
                                      } else {
                                          throw new Error("Copy command was unsuccessful");
                                      }
                                  } catch (err) {
                                      console.error("execCommand 复制失败:", err);
                                      alert("复制失败，请长按选择内容并手动复制");
                                  }
                              }
                          `;
                        const script = editor.dom.create('script', { type: 'text/javascript' }, copyScript);
                        editor.dom.add(editor.getBody(), script);
                    });
                }
            }
        };
    },
    watch: {
        content: {
            immediate: true,
            handler(newContent) {
                this.editorContent = newContent;
            }
        },
        editorContent(newContent) {
            this.$emit('update:content', newContent);
        }
    },
    methods: {
        onEditorInit(editor) {
            editor.setContent(this.editorContent);
        }
    }
};
</script>
<style scoped>
.container {
    width: 100%;
    height: calc(100vh - 90px);
    overflow: hidden;
}

:deep(.tox-tinymce) {
    border: none !important;
    height: 100% !important;
    max-height: 100vh !important;
}

:deep(.tox-editor-container) {
    height: 100% !important;
}

:deep(.tox-edit-area) {
    height: 100% !important;
}
/* :deep(.tox-edit-area::before) {
    height: 100% !important;
    border: none !important;
} */

:deep(.tox-edit-area__iframe) {
    height: 100% !important;
}
</style>
